@layer reset, tokens, base, components, utilities, overrides;
/* overrides layer reserved for legacy page-specific patches */

@import './core/tokens.css';
@import './core/_gradients.css';
@import './layout.css' layer(base);
@import './components/navigation/navigation.css' layer(components);
@import './components/app-header.css' layer(components);
@import './components/button/button.css' layer(components);
@import './components/form/form.css' layer(components);
@import './components/loaders.css' layer(components);
@import './components/modal.css' layer(components);
@import './components/misc.css' layer(components);
@import './components/sections.css' layer(components);
@import './utilities/layout-system.css' layer(utilities);
@import './utilities/utility-classes.css' layer(utilities);

@layer reset {
  html {
    box-sizing: border-box;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  /* Ensure code blocks are scrollable on smaller screens */
  pre {
    overflow-x: auto;
  }
}

@layer tokens {
  /* ---------- CSS Variables ---------- */
  :root {
    /* -------------------------------------------------------------- */
    /* Derived variables (legacy names kept for compatibility)        */
    /* -------------------------------------------------------------- */
    --color-bg: var(--color-gray-50);
    --color-text: var(--color-gray-900);
    --color-nav-bg: var(--color-gray-50);
    --color-nav-text: var(--color-gray-900);
    --color-surface: var(--color-gray-100);
    --color-white: var(--color-base-white);
    --color-black: var(--color-base-black);
    --shadow-login: var(--shadow-login-light);
    --md-bg: var(--color-md-bg);
    --md-text: var(--color-md-text);
    --md-heading-border: var(--color-md-heading-border);
    --md-h1-color: var(--color-md-h1);
    --md-h2-color: var(--color-md-h2);
    --md-h2-border: var(--color-md-h2-border);
    --md-h3-color: var(--color-md-h3);
    --md-h4-color: var(--color-md-h4);
    --md-strong-color: var(--color-md-strong);
    --md-table-bg: var(--color-md-table-bg);
    --md-th-bg: var(--color-md-th-bg);
    --md-th-color: var(--color-md-th-color);
    --md-td-color: var(--color-md-td-color);
    --md-td-bg: var(--color-md-td-bg);
    --md-table-border: var(--color-md-table-border);
    --md-zebra-bg: var(--color-md-zebra-bg);
    --md-code-bg: var(--color-md-code-bg);
    --md-code-color: var(--color-md-code-color);
    --md-link-color: var(--color-md-link);
    --md-link-hover: var(--color-md-link-hover);
    --md-blockquote-color: var(--color-md-blockquote);
    --md-blockquote-border: var(--color-md-blockquote-border);
    --md-blockquote-bg: var(--color-md-blockquote-bg);
    --md-hr-bg: var(--color-md-hr);
    --social-icon-filter: none;
    --overlay-surface: var(--overlay-light-bg);
    color-scheme: light dark;
  }

  html[data-theme='dark'] {
    --color-bg: var(--color-gray-900);
    --color-text: var(--color-gray-50);
    --color-nav-bg: var(--color-gray-800);
    --color-nav-text: var(--color-gray-50);
    --gradient-primary: var(--gradient-dark);
    --color-surface: var(--color-gray-800);
    --color-gray: var(--color-gray-700);
    --color-white: var(--color-base-white);
    --color-border-light: var(--color-gray-700);
    --color-subtle-bg: var(--color-gray-700);
    --color-subtle-bg-alt: var(--color-dark-black);
    --color-subtle-bg-hover: var(--color-gray-700);
    --color-border-muted: var(--color-gray-700);
    --color-border-soft: var(--color-gray-700);
    --color-spinner-track: var(--color-gray-700);
    --shadow-login: var(--shadow-login-dark);
    --md-bg: var(--color-md-bg);
    --md-text: var(--color-md-text);
    --md-heading-border: var(--color-md-heading-border);
    --md-h1-color: var(--color-md-h1);
    --md-h2-color: var(--color-md-h2);
    --md-h2-border: var(--color-md-h2-border);
    --md-h3-color: var(--color-md-h3);
    --md-h4-color: var(--color-md-h4);
    --md-strong-color: var(--color-md-strong);
    --md-table-bg: var(--color-md-table-bg);
    --md-th-bg: var(--color-md-th-bg);
    --md-th-color: var(--color-md-th-color);
    --md-td-color: var(--color-md-td-color);
    --md-td-bg: var(--color-md-td-bg);
    --md-table-border: var(--color-md-table-border);
    --md-zebra-bg: var(--color-md-zebra-bg);
    --md-code-bg: var(--color-md-code-bg);
    --md-code-color: var(--color-md-code-color);
    --md-link-color: var(--color-md-link);
    --md-link-hover: var(--color-md-link-hover);
    --md-blockquote-color: var(--color-md-blockquote);
    --md-blockquote-border: var(--color-md-blockquote-border);
    --md-blockquote-bg: var(--color-md-blockquote-bg);
    --md-hr-bg: var(--color-md-hr);
    --social-icon-filter: brightness(0) invert(1);
    --overlay-surface: var(--overlay-dark-surface);
    color-scheme: dark;
  }
}

@layer base {
  /* ---------- Typographic Baseline ---------- */
  body {
    font-family: var(--font-body);
    font-size: var(--font-size-2);
    line-height: 1.5;
  }

  main,
  article {
    margin-inline: auto;
    max-width: var(--measure);
  }

  p {
    line-height: 1.6;
    margin-block: 0 var(--space-4);
    max-width: var(--measure);
  }

  h1 {
    font-size: var(--font-size-5);
    line-height: 1.2;
  }

  h2 {
    font-size: var(--font-size-4);
    line-height: 1.3;
  }

  h3 {
    font-size: var(--font-size-3);
    line-height: 1.4;
  }

  h4 {
    font-size: var(--font-size-2);
    line-height: 1.5;
  }

  /* ---------- Language Helpers ---------- */
  html[lang^='en'] .is-lang-zh {
    display: none;
  }
  html[lang^='zh'] .is-lang-en {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }

  html {
    scroll-behavior: auto;
  }
}

@layer overrides {
  /* legacy page-specific patches */
}
